Olá!

Esse é mais um projeto utilizado como objeto de estudo, nele eu exponho meus conhecimentos e explico meus métodos para chegar nos resultados apresentados nesse portifólio.

A seguir, a análise da marca e dos elementos do site:

A Paleo é uma marca criada com objetivo de misturar o antigo com o moderno de forma elegante e simplista. Com cores que remetem ao rústico, o site tem relação a ideia principal da marca, criando e mantendo sua identidade visual.

A escolha da paleta de cores foi minuciosamente feita para estabelecer compatibilidade com os produtos. Cores rústicas, como o marrom e beje, são predominantes em todo o site, novamente, remetendo a ideia da marca.

Sua tipografia para títulos foi escolhida com o propósito de mostrar elegância e luxo que a marca carrega em si. Já para corpo de texto - nome dos produtos, entre outros - foi escolhida uma tipografia serifada geométrica, para fácil legibilidade.

Agora, serão analisadas as sessões de cada página do site:

De início temos a Página Inicial do site - ou a 'Home' do site - na imagem abaixo. Com a logo centralizada, assim como os elementos, o cabeçalho - 'Header' - consegue concentrar toda a personalidade da marca. Nele, se faz possível observar as duas tipografias usadas no site inteiro, o estilo de ícones e as cores do site na imagem ao fundo. 

O alinhamento, porém, é quebrado ao longo do site, já que se trata de um site de compra.

Logo abaixo da barra de pesquisa - que é sinalizada com um 'placeholder' -, temos 3 tópicos destacados, entre eles o primeiro que mistura a tipografia 'regular' com o itálico para criar contraste e destacar a segurança do site. E as imagens de produtos abaixo alinhadas com os 3 tópicos de cima.

Na próxima sessão do site temos a exibição de alguns dos produtos fornecidos pela empresa em questão. A sessão “Destaques” exibe os produtos mais vendidos da marca, assim como os produtos que a mesma deseja ressaltar, seja por sua popularidade, relevância ou quaisquer outro pré-requisito.

Vemos presente as tipografias de título e corpo de texto citadas anteriormente, assim como o uso das cores. Utilizei o critério de melhor legibilidade para aplicar ou não o uso da cor primária por mim escolhida - tons de marrom e bege. No caso de corpo de texto não utilizei essas cores, para não entrar em conflito com o fundo branco e não poluir o site. Invés disso, apliquei tons de cinza - claro e escuro - para obter o resultado desejado.

No fim da sessão temos uma paginação, que permite o usuário navegar pelas demais páginas e encontrar outros produtos oferecidos pela marca.

Por último, temos o Rodapé - ou o 'Footer'. Antecedendo o rodapé em si, existe um 'newsletter' para que o cliente da marca receba ofertas, lançamentos, eventos anuais de promoções, ou quaisquer itens e/ou convites que a empresa queira comunicar ao mesmo, que seja de seu interesse, e logo abaixo, há o rodapé. Nele é reunido todos os tópicos, páginas, informações para contato, o institucional da marca, bandeiras de cartões aceitos como pagamento e redes sociais da empresa.

A seguir uma imagem da Página Inicial completa para melhor visualização do conteúdo:

    

Agora, entraremos mais afundo no site e iremos visualizar outras páginas do mesmo.

No menu do cabeçalho é encontrado 3 categorias, essas são: Roupas, Calçados e Acessórios. Na imagem a seguir, veremos como elas são organizadas.

De início, é reparável a mudança no cabeçalho, ele é encurtado. A barra de pesquisa some, a distribuição dos elementos muda, a foto de fundo é diferente. Todas essas mudanças, porém, a essência e estilo permanecem. É adicionado um 'breadcrumb' para ajudar na localização do site e o cliente saber qual caminho o levou até determinado lugar. A presença dos Filtros é ótima para facilitar a busca do usuário, otimiza o tempo do mesmo. O alinhamento dos produtos foi pensado para o cliente conseguir ver mais produtos em um menor espaço, bem diferente da página inicial, onde os produtos são alinhados em 2 colunas em vez de 3.

Têm novamente a paginação para ajudar na navegação na página.

E por fim o 'newsletter' e o rodapé do site.

E esse é o modelo de como são organizadas as categorias do site.

Sendo um site de compras, é indispensável a existência de um carrinho. Nele o cliente encontrará um resumo de todos os produtos que foram adicionados por si durante toda sua navegação pelo site. Na página “Carrinho” é exibido o produto em uma imagem de 110x110, dessa forma o cliente sabe exatamente qual produto ele está comprando, juntamente com o nome do produto e seu preço unitário, a quantidade - sendo possível aumentar ou diminuir -, o subtotal e a possibilidade de excluir um item do carrinho.

Logo abaixo, o cliente pode calcular qual será o valor do frete baseado no CEP e caso ele não tenha conhecimento de como descobrir o CEP, colocando o mouse em cima da interrogação abre uma caixa de texto com uma dica de como ele pode fazer isso.

Por fim, mostra o total de quanto o cliente irá pagar e os botões para continuar comprando ou finalizar a compra.

E aqui termina a apresentação do site para 'desktop'. 

A seguir, uma curta demonstração de como seria esse mesmo site para o 'mobile' - a versão para celulares no geral.

Nesse tópico, irei pontuar as principais mudanças e adaptações do site para o 'mobile' e direi os motivos dessas escolhas.

Primeiramente, o encurtamento do cabeçalho - 'header' - para ocupar menos espaço. A barra de pesquisa foi removida e, no lugar da mesma, o ícone de busca - a lupa - foi adicionado. A seleção das categorias “Roupas, Calçados e Acessórios” foram substituídas pelo menu hambúrguer, onde será possível encontra-las dentro dele.

Os 3 tópicos que antes ficavam acima das imagens foram removidos, afim de diminuir a poluição visual no site.

Todo o alinhamento da página mudou, sendo agora completamente centralizado, para o conteúdo ser visualizado no meio da tela do usuário. A sessão de “Destaques” foi de 4 itens exibidos para apenas 2 por paginação. E o resto da Página Inicial segue com o alinhamento centralizado e um item abaixo do outro.

Todas essas escolhas foram feitas com o intuito de diminuir a exibição do conteúdo de forma compatível com a tela do usuário. Deixando o site livre de excesso de detalhes e informações, levando em consideração que a tela do celular é menor que uma tela do monitor, do contrário, a visualização ficaria muito poluída.

Na imagem abaixo essa interface pode ser visualizada com todas essas modificações que foram descritas acima:

Esse é o projeto Paleo Alfaiataria.